<template>
    <div>
        <main role="main">
            <div class="affix-container">
                <el-row>
<!--                    <el-col :span="5">-->
<!--                        <el-affix target=".affix-container" :offset="20">-->
<!--                            <el-table-->
<!--                                    :data="rangeList"-->
<!--                                    style="width: 188px;margin-left: 60px"-->
<!--                                    stripe-->
<!--                            >-->
<!--                                <el-table-column label="排名" prop="range" width="60"></el-table-column>-->
<!--                                <el-table-column label="用户名称" prop="userName" width="128">-->
<!--                                </el-table-column>-->
<!--                            </el-table>-->
<!--                        </el-affix>-->
<!--                    </el-col>-->
                    <el-col :span="17">

                        <el-row>
                            <el-tabs v-model="activeTabName" type="card" @tab-click="handleTabClick">
                                <el-tab-pane label="训练系统提交记录" name="trainingSystemSubmissionTab"></el-tab-pane>
                                <el-tab-pane label="考试系统提交记录" name="examSystemSubmissionTab" ></el-tab-pane>
                                <el-tab-pane label="作业系统提交记录" name="homeworkSystemSubmissionTab" ></el-tab-pane>
                            </el-tabs>
                        </el-row>

                        <el-row>
                            <el-col :span="6" v-show="activeTabName === 'examSystemSubmissionTab'">
                                <label>考试名称</label>
                            </el-col>

                            <el-col :span="6" v-show="activeTabName === 'homeworkSystemSubmissionTab'">
                                <label>作业名称</label>
                            </el-col>

                            <el-col :span="6">
                                <label>用户名</label>
                            </el-col>

                            <el-col :span="6" >
                                <label>试题名称</label>
                            </el-col>

                            <el-col :span="6" v-show="activeTabName == 'trainingSystemSubmissionTab'">
                                <label>试题ID</label>
                            </el-col>

                        </el-row>

                        <el-row>

                            <el-col :span="6" v-show="activeTabName === 'examSystemSubmissionTab'">
                                <el-input v-model="examName" placeholder="Please input Exam name" />
                            </el-col>

                            <el-col :span="6" v-show="activeTabName === 'homeworkSystemSubmissionTab'">
                                <el-input v-model="className" placeholder="Please input class name" />

                            </el-col>

                            <el-col :span="6">
                                <el-input  v-model="userName" placeholder="Please input user name" />
                            </el-col>


                            <el-col :span="6">
                                <el-input style="margin-left: 5px" v-model="problemName" placeholder="Please input problem name" />
                            </el-col>


                            <el-col :span="6"  v-show="activeTabName === 'trainingSystemSubmissionTab'">
                                <el-input style="margin-left: 10px" v-model="problemId" placeholder="Please input problem id" />
                            </el-col>

                            <el-col :span="1"  v-show="activeTabName === 'trainingSystemSubmissionTab'">
                                <el-button style="margin-left: 20px" type="primary" v-on:click="getLatestSubmissionRecords">
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                </el-button>
                            </el-col>

                            <el-col :span="1" v-show="activeTabName === 'examSystemSubmissionTab'">
                                <el-button  type="primary" v-on:click="getExamSubmissionRecord">
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                </el-button>
                            </el-col>

                            <el-col :span="1" v-show="activeTabName === 'homeworkSystemSubmissionTab'">
                                <el-button type="primary" v-on:click="getHomeworkSubmissionRecord">
                                    <el-icon>
                                        <Search />
                                    </el-icon>
                                </el-button>
                            </el-col>

                            <el-col :span="1">
                                <el-button style="margin-left: 40px" color="#626aef" v-on:click="resetQueryCondition">
                                    Reset
                                </el-button>
                            </el-col>
                        </el-row>

                        <el-row v-show="activeTabName === 'trainingSystemSubmissionTab'">
                            <el-table
                                    :data="trainingSubmissionRecords"
                                    style="width: auto"
                                    stripe
                                    @row-click="openTrainingSubmissionDetail"
                            >
                                <el-table-column label="提交结果" width="120">
                                    <template #default="scope">
                            <span v-bind:class="{'success' : scope.row.submissionJudgeResult === SUBMISSION_RESULT.AC.key,
                                        'danger' : (scope.row.submissionJudgeResult === SUBMISSION_RESULT.CE.key || scope.row.submissionJudgeResult === SUBMISSION_RESULT.WA.key),
                                        'warning' : (scope.row.submissionJudgeResult !== SUBMISSION_RESULT.CE.key && scope.row.submissionJudgeResult !== SUBMISSION_RESULT.AC.key
                                        && scope.row.submissionJudgeResult !== SUBMISSION_RESULT.WA.key)
                                     }">
                                {{scope.row.submissionJudgeResult}}
                            </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="username" label="用户名称" width="160"></el-table-column>
                                <el-table-column prop="problemName" label="题目名称" width="320"></el-table-column>
                                <el-table-column prop="submissionExecuteTime" label="执行用时" width="100"></el-table-column>
                                <el-table-column prop="submissionUsedMemory" label="内存消耗" width="100"></el-table-column>
                                <el-table-column prop="languageName" label="语言" width="100"></el-table-column>
                                <el-table-column label="提交时间" width="160">
                                    <template #default="scope">
                            <span>
                                {{formatData(scope.row.submissionSubmitTime)}}
                            </span>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </el-row>

                        <el-row v-show="activeTabName === 'examSystemSubmissionTab'">
                            <el-table
                                    :data="examSubmissionRecords"
                                    style="width: auto"
                                    stripe
                                    @row-click="openExamOrHomeworkSubmissionDetail"
                            >

                                <el-table-column prop="examName" label="考试名称" width="160"></el-table-column>
                                <el-table-column label="提交结果" width="120">
                                    <template #default="scope">
                                        <span v-bind:class="{'success' : scope.row.submissionJudgeResult === SUBMISSION_RESULT.AC.key,
                                                    'danger' : (scope.row.submissionJudgeResult === SUBMISSION_RESULT.CE.key || scope.row.submissionJudgeResult === SUBMISSION_RESULT.WA.key),
                                                    'warning' : (scope.row.submissionJudgeResult !== SUBMISSION_RESULT.CE.key && scope.row.submissionJudgeResult !== SUBMISSION_RESULT.AC.key
                                                    && scope.row.submissionJudgeResult !== SUBMISSION_RESULT.WA.key)
                                                 }">
                                            {{scope.row.submissionJudgeResult}}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="username" label="用户名称" width="160"></el-table-column>
                                <el-table-column prop="problemName" label="题目名称" width="320"></el-table-column>
                                <el-table-column prop="submissionUsedTime" label="执行用时" width="100"></el-table-column>
                                <el-table-column prop="submissionUsedMemory" label="内存消耗" width="100"></el-table-column>
                                <el-table-column prop="languageName" label="语言" width="100"></el-table-column>
                                <el-table-column label="提交时间" width="160">
                                    <template #default="scope">
                            <span>
                                {{formatData(scope.row.submissionSubmitTime)}}
                            </span>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </el-row>

                        <el-row v-show="activeTabName === 'homeworkSystemSubmissionTab'">
                            <el-table
                                    :data="homeworkSubmissionRecords"
                                    style="width: auto"
                                    stripe
                                    @row-click="openExamOrHomeworkSubmissionDetail"
                            >
                                <el-table-column prop="className" label="班级名称" width="160"></el-table-column>
                                <el-table-column label="提交结果" width="120">
                                    <template #default="scope">
                            <span v-bind:class="{'success' : scope.row.submissionJudgeResult === SUBMISSION_RESULT.AC.key,
                                        'danger' : (scope.row.submissionJudgeResult === SUBMISSION_RESULT.CE.key || scope.row.submissionJudgeResult === SUBMISSION_RESULT.WA.key),
                                        'warning' : (scope.row.submissionJudgeResult !== SUBMISSION_RESULT.CE.key && scope.row.submissionJudgeResult !== SUBMISSION_RESULT.AC.key
                                        && scope.row.submissionJudgeResult !== SUBMISSION_RESULT.WA.key)
                                     }">
                                {{scope.row.submissionJudgeResult}}
                            </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="userName" label="用户名称" width="160"></el-table-column>
                                <el-table-column prop="problemName" label="题目名称" width="320"></el-table-column>
                                <el-table-column prop="submissionUsedTime" label="执行用时" width="100"></el-table-column>
                                <el-table-column prop="submissionUsedMemory" label="内存消耗" width="100"></el-table-column>
                                <el-table-column prop="languageName" label="语言" width="100"></el-table-column>
                                <el-table-column label="提交时间" width="160">
                                    <template #default="scope">
                            <span>
                                {{formatData(scope.row.submissionSubmitTime)}}
                            </span>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </el-row>


                    </el-col>
                    <el-col :span="2"></el-col>
                </el-row>
            </div>




        </main>

        <el-dialog v-model="viewSubmissionDetail" title="提交详情" width="50%" center>

            <PerfectScrollbar>
                <v-md-preview :text="selectSubmissionResult" style="height: calc(60vh)"></v-md-preview>
            </PerfectScrollbar>

            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="viewSubmissionDetail = false">
                    Confirm
                </el-button>
              </span>
            </template>
        </el-dialog>

        <el-backtop :right="100" :bottom="100" />
    </div>

</template>

<script>

    import * as echarts from 'echarts'
    import API from '../api/questionManager'
    export default {
        name: 'index',

        data: function () {
            return {
                loginMember: {},

                activeTabName: 'trainingSystemSubmissionTab',
                examName: '',
                className: '',
                userName: '',
                problemId: '',
                problemName: '',
                querySize: 50,
                sourceModule:'voj',
                viewSubmissionDetail: false,
                selectSubmissionResult: "",

                trainingSubmissionRecords: [],
                examSubmissionRecords: [],
                homeworkSubmissionRecords: [],
                rangeList: [],
                getLatestSubmissionRecordsTimer: null,

                SUBMISSION_RESULT: SUBMISSION_RESULT,
                TRAINING_LANGUAGES: TRAINING_LANGUAGES,
                USER_GROUP: USER_GROUP,
            }
        },
        mounted() {
            let _this = this;

            _this.loginMember = Tool.getLoginMember();

            window.addEventListener('scroll', this.handleScroll, false);

            _this.getLatestSubmissionRecords();
            //去掉定时器
            //_this.getLatestSubmissionRecordsTimer = setInterval(_this.getLatestSubmissionRecords, 10000);

            this.getSolveProblemRangeList();


        },
        beforeUnmount() {
            if(this.getLatestSubmissionRecordsTimer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.getLatestSubmissionRecordsTimer); //关闭
            }
            window.removeEventListener('scroll', this.handleScroll, false);

        },


        methods: {
            handleScroll() {
                let _this = this;
                //变量scrollTop是滚动条滚动时，距离顶部的距离
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                //变量windowHeight是可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                //滚动条到底部的条件
                if(scrollTop+windowHeight >= scrollHeight){
                    //到了这个就可以进行业务逻辑加载后台数据了
                    _this.querySize += 50;
                    if(_this.querySize >= 1000) {
                        _this.querySize = 1000;
                        _this.$notify.warning("已达支持查询数据上限...");
                        return;
                    }
                    Loading.show();
                    switch (_this.activeTabName) {
                        case "trainingSystemSubmissionTab":
                            _this.getLatestSubmissionRecords();
                            break;

                        case "examSystemSubmissionTab":
                            _this.getExamSubmissionRecord();
                            break;

                        case "homeworkSystemSubmissionTab":
                            _this.getHomeworkSubmissionRecord();
                            break;

                        default:
                            break;
                    }
                }
            },

            resetQueryCondition() {
                this.querySize = 50;
                this.examName= '';
                this.className= '';
                this.userName= '';
                this.problemName= '';
                this.problemId = '';
            },

            handleTabClick(tab, event) {
                let _this = this;
                _this.resetQueryCondition();
                switch (tab.props.name) {
                    case 'trainingSystemSubmissionTab':
                        _this.sourceModule = 'voj'
                        _this.getLatestSubmissionRecords();
                        break;
                    case 'examSystemSubmissionTab':
                        _this.sourceModule = 'exam'
                        _this.getExamSubmissionRecord();
                        break;
                    case 'homeworkSystemSubmissionTab':
                        _this.sourceModule = 'trainer'
                        _this.getHomeworkSubmissionRecord();
                        break;
                    default:
                        break;
                }
            },

            formatData(cellValue){

                //把传过来的日期进行回炉重造一下，又创建了一个js的 Date对象，进行重新构造，转为String字符串
                //最终返回 s 就可以了
                var s =	new Date(cellValue).toLocaleString();
                return s;
            },

            openTrainingSubmissionDetail(row, column) {
                let submitResult = row
                
                this.viewSubmissionDetail = true;

                let previewSubmissionResult = "### "

                previewSubmissionResult += (submitResult.judgeResult.judgeResultSlug === SUBMISSION_RESULT.AC.key ? "✔" : "❌") + "提交结果 " + submitResult.judgeResult.judgeResultName + "\n"

                previewSubmissionResult += "### 试题名称 " + submitResult.trainingProblem.problemName + "\n"

                previewSubmissionResult += "### 学生姓名 " + submitResult.user.userName + "\n"

                previewSubmissionResult += "### 执行用时 " + submitResult.usedTime + "ms\n"

                previewSubmissionResult += "### 内存消耗 " + submitResult.usedMemory + "kb\n"

                previewSubmissionResult += "### 使用语言 " + submitResult.language.languageName + "\n"

                previewSubmissionResult += "### 提交时间 " + this.formatData(submitResult.submitTime) + "\n"

                previewSubmissionResult += "### 提交的代码\n"

                previewSubmissionResult +=
                    "```" + "\n" +
                    submitResult.code + "\n" +
                    "```"
                    + "\n"

                this.selectSubmissionResult = previewSubmissionResult;
            },

            openExamOrHomeworkSubmissionDetail(row, column) {
                let submitResult = row
                this.viewSubmissionDetail = true;

                let previewSubmissionResult = "### "

                previewSubmissionResult += (submitResult.submissionJudgeResult === SUBMISSION_RESULT.AC.key ? "✔" : "❌") + "提交结果 " + submitResult.submissionJudgeResult + "\n"

                previewSubmissionResult += "### 试题名称" + submitResult.problemName + "\n"

                previewSubmissionResult += "### 学生姓名 " + submitResult.userName + "\n"

                previewSubmissionResult += "### 执行用时 " + submitResult.submissionUsedTime + "ms\n"

                previewSubmissionResult += "### 内存消耗 " + submitResult.submissionUsedMemory + "kb\n"

                previewSubmissionResult += "### 使用语言 " + submitResult.languageName + "\n"

                previewSubmissionResult += "### 提交时间 " + this.formatData(submitResult.submissionSubmitTime) + "\n"

                previewSubmissionResult += "### 提交的代码\n"

                previewSubmissionResult +=
                    "```" + "\n" +
                    submitResult.submissionCode + "\n" +
                    "```"
                    + "\n"

                this.selectSubmissionResult = previewSubmissionResult;
            },

            getLatestSubmissionRecords() {
                let token = localStorage.getItem('token')
                let param = {}
                let _this = this;
                param.problemId= _this.problemId,
                param.username =_this.userName,
                param.problemName = _this.problemName,
                param.size=_this.querySize,
                param.current=1
                param.sourceModule = _this.sourceModule
              API.getSubmissionRecord(param,token).then((res) => {
                  if (res.data.success) {
                      Loading.hide();
                      _this.trainingSubmissionRecords = res.data.content.records;
                  }
              }).catch((err) => {
                  Loading.hide();
                  console.log(err)
              });

              // API.getExamSubmissionRecord(param,token).then(res=>{
              //
              // }).catch(e=>{
              //   console.log(e)
              // })
                // let _this = this;
                // _this.$axios.post("/training/submission/getLatestSubmissions", {
                //     problemId: _this.problemId,
                //     userName: _this.userName,
                //     problemName: _this.problemName,
                //     limit: _this.querySize,
                // }).then((res) => {
                //     if (res.data.success) {
                //         Loading.hide();
                //         _this.trainingSubmissionRecords = res.data.content;
                //     }
                // }).catch((err) => {
                //     Loading.hide();
                //     console.log(err)
                // });
            },

            getExamSubmissionRecord() {
              let token = localStorage.getItem('token')
              let param = {}
              let _this = this;
              param.problemId= _this.problemId,
                  param.username =_this.userName,
                  param.problemName = _this.problemName,
                  param.size=_this.querySize,
                  param.current=1
              param.sourceModule = 'exam'
              API.getSubmissionRecord(param,token).then((res) => {
                if (res.data.success) {
                  Loading.hide();
                  _this.examSubmissionRecords = res.data.content.records;
                }
              }).catch((err) => {
                Loading.hide();
                console.log(err)
              });
                // let _this = this;
                // _this.$axios.post("/training/submission/getExamSubmissionRecord", {
                //     examName: _this.examName,
                //     userName: _this.userName,
                //     problemName: _this.problemName,
                //     limit: _this.querySize,
                // }).then((res) => {
                //     Loading.hide();
                //     if (res.data.success) {
                //         _this.examSubmissionRecords = res.data.content;
                //     }
                // }).catch((err) => {
                //     Loading.hide();
                //     console.log(err)
                // });
            },

            getHomeworkSubmissionRecord() {
              let token = localStorage.getItem('token')
              let param = {}
              let _this = this;
              param.problemId= _this.problemId,
                  param.username =_this.userName,
                  param.problemName = _this.problemName,
                  param.size=_this.querySize,
                  param.current=1
              param.sourceModule = 'trainer'
              API.getSubmissionRecord(param,token).then((res) => {
                if (res.data.success) {
                  Loading.hide();
                  _this.homeworkSubmissionRecords = res.data.content.records;
                }
              }).catch((err) => {
                Loading.hide();
                console.log(err)
              });
                // let _this = this;
                // _this.$axios.post("/training/submission/getHomeworkSubmissionRecord", {
                //     className: _this.className,
                //     userName: _this.userName,
                //     problemName: _this.problemName,
                //     limit: _this.querySize,
                // }).then((res) => {
                //     Loading.hide();
                //     if (res.data.success) {
                //         _this.homeworkSubmissionRecords = res.data.content;
                //     }
                // }).catch((err) => {
                //     Loading.hide();
                //     console.log(err)
                // });
            },

            getSolveProblemRangeList() {
               //  let _this = this;
               //  let token = localStorage.getItem('token')
               // API.getSolveProblemCount(token).then((res) => {
               //      if (res.data.success) {
               //          let rangeList = res.data.content;
               //          let i = 1;
               //          rangeList.forEach(
               //              (userName) => {
               //                  let range = '';
               //                  switch (i) {
               //                      case 1 :
               //                          range = '🥇' + i;
               //                          break
               //                      case 2 :
               //                          range = '🥈' + i;
               //                          break
               //                      case 3 :
               //                          range = '🥉' + i;
               //                          break
               //                      default:
               //                          range = '🏅' + i;
               //                  }
               //                  _this.rangeList.push(
               //                      {
               //                          userName: userName,
               //                          range: range
               //                      }
               //                  );
               //                  i++;
               //              }
               //          )
               //      }
               //  }).catch((err) => {
               //      console.log(err)
               //  });
            },
        }
    }
</script>

<style>

    label {
        font-weight: bold;
    }

    .success {
        color: #67c23a;
    }

    .warning {
        color: #ffc107;
    }

    .danger {
        color: #EF4743;
    }

    .affix-container {
        text-align: left;
        border-radius: 4px;
    }
</style>
